<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动</title>
</head>
<body>
    <select id="province">
        <option>--请选择--</option>
        <option value="0">江西省</option>
        <option value="1">浙江省</option>
        <option value="2">江苏省</option>
        <option value="3">台湾省</option>
    </select>
    <select id="city">
        <option>---请选择-</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var provices=[
        ["南昌市","九江市","赣州市"],
        ["杭州市","宁波市","温州市","嘉兴市"],
        ["南京市","苏州市","扬州市"],
        ["台北市","台中市","台南市"]
    ];



   /* document.getElementById("province").onchange=function () {
        let ele=document.getElementById("city")
        ele.innerHTML="<option>" + "--请选择--" + "</option>";
        let arr=provices[this.value];
        for (let i=0;i<arr.length;i++){
            ele.innerHTML+="<option>"+arr[i]+"</optino>"
        }
    }*/

    $("#province").change(function () {
        $("#city").html("<option>--请选择--</option>")
        let a=provices[$(this).val()];

        /*for (let i = 0; i < a.length; i++) {
            $("#city").append("<option>"+a[i]+"</optino>");
        }*/
        $.each(a,function(index,ele){
            $("#city").append("<option>"+ele+"</opotion>");
        })
        /*
        二维数组
        let a=$(this).val();
        $.each(provices[a],function(index,ele){
            $("#city").append("<option>"+provices[a][index]+"</optino>");

        })*/

       /* $(a).each(function (index,ele) {
            $("#city").append("<option>"+a[index]+"</optino>");
        })*/
    });
</script>
</html>